<!--
 * @Author: zouyaoji@https://github.com/zouyaoji
 * @Date: 2021-12-05 21:23:27
 * @LastEditTime: 2022-02-26 14:11:20
 * @LastEditors: zouyaoji
 * @Description:
 * @FilePath: \vue-cesium@next\website\components\link.vue
-->
<script lang="ts">
import { h } from 'vue'
// Components
import { ElIcon } from 'element-plus'

const ExternalLink = () =>
  h(
    'svg',
    {
      class: 'link-icon',
      viewBox: '0 0 1024 1024',
      xmlns: 'http://www.w3.org/2000/svg',
      width: 16,
      height: 16
    },
    [
      h('path', {
        d: 'M853.333333 469.333333a42.666667 42.666667 0 0 0-42.666666 42.666667v256a42.666667 42.666667 0 0 1-42.666667 42.666667H256a42.666667 42.666667 0 0 1-42.666667-42.666667V256a42.666667 42.666667 0 0 1 42.666667-42.666667h256a42.666667 42.666667 0 0 0 0-85.333333H256a128 128 0 0 0-128 128v512a128 128 0 0 0 128 128h512a128 128 0 0 0 128-128v-256a42.666667 42.666667 0 0 0-42.666667-42.666667z',
        fill: 'currentColor'
      }),

      h('path', {
        d: 'M682.666667 213.333333h67.413333l-268.373333 267.946667a42.666667 42.666667 0 0 0 0 60.586667 42.666667 42.666667 0 0 0 60.586666 0L810.666667 273.92V341.333333a42.666667 42.666667 0 0 0 42.666666 42.666667 42.666667 42.666667 0 0 0 42.666667-42.666667V170.666667a42.666667 42.666667 0 0 0-42.666667-42.666667h-170.666666a42.666667 42.666667 0 0 0 0 85.333333z',
        fill: 'currentColor'
      })
    ]
  )

const skipped = ['https://www.npmjs.org/package/vue-cesium']

const internalLinks = [
  'http://localhost',
  'http://127.0.0.1',
  'https://zouyaoji.top/vue-cesium',
  'https://zouyaoji.gitee.io/vue-cesium',
  'https://vue-cesium.songluck.com/'
]

export default {
  name: 'AppLink',
  inheritAttrs: false,
  props: {
    href: {
      type: String,
      default: ''
    }
  },
  computed: {
    passThrough() {
      return {
        href: this.href,
        target: this.isInternal ? null : '_blank',
        rel: 'noopener noreferrer'
      }
    },
    isInternal() {
      return this.href.startsWith('/#') || this.href.startsWith('./#') || internalLinks.some(link => this.href.includes(link))
    },
    isExternal() {
      return !this.isInternal
    },
    isSamePage() {
      return this.$router.currentRoute.value.path.includes(this.href)
    },
    isSkipped() {
      return skipped.indexOf(this.href) > -1
    }
  },
  methods: {
    onClick(e: MouseEvent) {
      if (!this.isSamePage) return
      e.preventDefault()
      this.$router.go(this.href)
    }
  },
  render() {
    const children = []

    children.push(h('span', { class: 'vue-cesium__link-text' }, [this.$slots.default()]))
    !this.isSkipped &&
      this.isExternal &&
      children.push(
        h(
          ElIcon,
          {
            style: {
              fontSize: '14px',
              marginLeft: '4px'
            },
            color: 'inherit'
          },
          {
            default: () => [h(ExternalLink)]
          }
        )
      )
    const props = {
      class: 'vue-cesium__link',
      ...this.passThrough,
      onClick: this.onClick
    }

    return h('a', props, children)
    // ?
    // : h(resolveComponent('router-link'), props, {
    //   default: () => children,
    // })
  }
}
</script>
